<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nav</title>
    <style type="text/css">


        .tip-content {
            display: block;
            background-color: black;
            color: white;
            padding: 10px 0;
            width: 200px;
            border: 50px solid;
            border-color: yellow skyblue pink deeppink;
        }

        .tip-container {
            display: inline-block;
            width: 200px;
            height: 50px;
            border: skyblue solid 2px;
            border-radius: 8px;
            position: relative;
        }
        .tip-container > span {
            line-height: 50px;
        }
        .tip-bg{
            width: 0px;
            height: 0px;
            border: 20px solid;
            border-color: skyblue transparent transparent transparent;

            position: absolute;
            left: 145px;
            top: 52px;
        }
        .tip-bg-border{
            width: 0px;
            height: 0px;
            border: 20px solid;
            border-color: white transparent transparent transparent;

            position: absolute;
            left: 145px;
            top: 50px;
        }


        .last {
            position: relative;
        }

        .last:hover .last-bubble {
            display: inline-block;

        }

        .last-bubble {
            display: none;
            width: 200px;
            height: 50px;
            background-color: skyblue;

            border: skyblue solid 2px;
            border-radius: 10px;

            position: relative;
            bottom: 60px;
            right: 195px;
        }

        .last-bubble > span {
            line-height: 50px;

        }

        .last-bubble-bg-border {
            width: 0;
            height: 0;
            border: solid 20px;
            border-color: skyblue transparent transparent transparent;

            position: absolute;
            left: 145px;
            top: 52px;
        }

        .last-bubble-bg {
            width: 0;
            height: 0;
            border: solid 20px;
            border-color: skyblue transparent transparent transparent;

            position: absolute;
            left: 145px;
            top: 50px;
            z-index: 1;
        }


    </style>
</head>
<body>

<div class="tip-content">来自于宇宙深处的提示</div>

<br>
<hr>
<br>

<div class="tip-container">
    <span>来自于宇宙深处的提示</span>
    <div class="tip-bg"></div>
    <div class="tip-bg-border"></div>
</div>

<br>
<br>
<br>
<br>
<hr>
<br>
<br>
<br>
<br><br><br><br><br>

<div class="last">
    <span>我在这儿</span>
    <div class="last-bubble">
        <span>来自于宇宙深处的提示</span>
        <div class="last-bubble-bg"></div>
        <div class="last-bubble-bg-border"></div>
    </div>
</div>

</body>
</html>
